<template>
 <div class="toast" v-show="isShow">
     {{message}}
 </div>
</template>

<script>
 export default {
   data () {
     return {

     }
   },
   props: {
       message: {
           type: String,
           default() {
               return ''
           }
       },
       isShow: {
           type: Boolean,
           default: false
           
       },

   },
   created() {

   },
   methods: {
       show(message, duration=2000) {
           this.isShow = true
           this.message = message

           setTimeout(() => {
               this.isShow = false
           }, duration)
       }
   }
 }
</script>

<style scoped>
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);

    z-index: 999;

    color: #fff;
}
 
</style>
